<h1 class="center sp-28" [@enter1]="{ value: '', params: { delay: 0 } }">动态参数</h1>

<form #f="ngForm" class="center" nz-form nzLayout="vertical" [@enter1]="{ value: '', params: { delay: 0 } }">
  <nz-form-item>
    <nz-form-label nzFor="duration" nzRequired>过度时间（ms）</nz-form-label>
    <nz-form-control>
      <nz-input-number id="duration" name="duration" [nzMin]="1" [nzStep]="1" [(ngModel)]="duration" />
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label nzFor="delay" nzRequired>延迟时间（ms）</nz-form-label>
    <nz-form-control>
      <nz-input-number id="delay" name="delay" [nzMin]="1" [nzStep]="1" [(ngModel)]="delay" />
    </nz-form-control>
  </nz-form-item>

  @if (animation === 'pulse') {
    <nz-form-item>
      <nz-form-label nzFor="scale" nzRequired>放大缩小倍数</nz-form-label>
      <nz-form-control>
        <nz-input-number id="scale" name="scale" [nzMin]="0" [nzStep]="0.01" [(ngModel)]="scale" />
      </nz-form-control>
    </nz-form-item>
  }

  @if (
    [
      'shake',
      'bounceInDown',
      'bounceInUp',
      'bounceInLeft',
      'bounceInRight',
      'bounceOutDown',
      'bounceOutUp',
      'bounceOutLeft',
      'bounceOutRight',
      'fadeInDownBig',
      'fadeInUpBig',
      'fadeInLeftBig',
      'fadeInRightBig',
      'fadeInDown',
      'fadeInUp',
      'fadeInLeft',
      'fadeInRight',
      'fadeOutDownBig',
      'fadeOutUpBig',
      'fadeOutLeftBig',
      'fadeOutRightBig',
      'fadeOutDown',
      'fadeOutUp',
      'fadeOutLeft',
      'fadeOutRight',
      'lightSpeedIn',
      'lightSpeedOut',
      'slideInUp',
      'slideInDown',
      'slideInLeft',
      'slideInRight',
      'slideOutUp',
      'slideOutDown',
      'slideOutLeft',
      'slideOutRight',
      'rollIn',
      'rollOut'
    ].includes(animation)
  ) {
    <nz-form-item>
      <nz-form-label nzFor="delay" nzRequired>Translate (px, %, rem, em, vw, vh):</nz-form-label>
      <nz-form-control>
        <input id="translate" name="translate" nz-input pattern="-?([0-9])?\.?[0-9]+(px|%|rem|em|vw|vh|vmin|vmax)" [(ngModel)]="translate" />
      </nz-form-control>
    </nz-form-item>
  }

  @if (
    [
      'flipInX',
      'flipInY',
      'flipOutX',
      'flipOutY',
      'rotateIn',
      'rotateInDownLeft',
      'rotateInDownRight',
      'rotateInUpLeft',
      'rotateInUpRight',
      'rotateOut',
      'rotateOutDownLeft',
      'rotateOutDownRight',
      'rotateOutUpLeft',
      'rotateOutUpRight',
      'rollIn',
      'rollOut',
      'rotate'
    ].includes(animation)
  ) {
    <nz-form-item>
      <nz-form-label nzFor="degrees" nzRequired>旋转度数</nz-form-label>
      <nz-form-control>
        <nz-input-number id="degrees" name="degrees" [nzMin]="0" [nzStep]="0.01" [(ngModel)]="degrees" />
      </nz-form-control>
    </nz-form-item>
  }
</form>

<div class="center" [@enter2]>
  <div class="center">
    @switch (animation) {
      <!-- Attention seekers -->
      @case ('bounce') {
        <app-angular-img [@bounce]="{ value: animationState, params: { duration: duration, delay: delay } }" />
      }
      @case ('flash') {
        <app-angular-img [@flash]="{ value: animationState, params: { duration: duration, delay: delay } }" />
      }
      @case ('pulse') {
        <app-angular-img [@pulse]="{ value: animationState, params: { duration: duration, delay: delay, scale: scale } }" />
      }
      @case ('rubberBand') {
        <app-angular-img [@rubberBand]="{ value: animationState, params: { duration: duration, delay: delay } }" />
      }
      @case ('shake') {
        <app-angular-img [@shake]="{ value: animationState, params: { duration: duration, delay: delay, translate: translate } }" />
      }
      @case ('swing') {
        <app-angular-img [@swing]="{ value: animationState, params: { duration: duration, delay: delay } }" />
      }
      @case ('tada') {
        <app-angular-img [@tada]="{ value: animationState, params: { duration: duration, delay: delay } }" />
      }
      @case ('wobble') {
        <app-angular-img [@wobble]="{ value: animationState, params: { duration: duration, delay: delay } }" />
      }
      @case ('jello') {
        <app-angular-img [@jello]="{ value: animationState, params: { duration: duration, delay: delay } }" />
      }
      <!-- Bouncing entrances -->
      @case ('bounceIn') {
        <app-angular-img [@bounceIn]="{ value: animationState, params: { duration: duration, delay: delay } }" />
      }
      @case ('bounceInDown') {
        <app-angular-img [@bounceInDown]="{ value: animationState, params: { duration: duration, delay: delay, translate: translate } }" />
      }
      @case ('bounceInLeft') {
        <app-angular-img [@bounceInLeft]="{ value: animationState, params: { duration: duration, delay: delay, translate: translate } }" />
      }
      @case ('bounceInRight') {
        <app-angular-img [@bounceInRight]="{ value: animationState, params: { duration: duration, delay: delay, translate: translate } }" />
      }
      @case ('bounceInUp') {
        <app-angular-img [@bounceInUp]="{ value: animationState, params: { duration: duration, delay: delay, translate: translate } }" />
      }
      <!-- Bouncing exits -->
      @case ('bounceOut') {
        <app-angular-img [@bounceOut]="{ value: animationState, params: { duration: duration, delay: delay } }" />
      }
      @case ('bounceOutDown') {
        <app-angular-img [@bounceOutDown]="{ value: animationState, params: { duration: duration, delay: delay, translate: translate } }" />
      }
      @case ('bounceOutLeft') {
        <app-angular-img [@bounceOutLeft]="{ value: animationState, params: { duration: duration, delay: delay, translate: translate } }" />
      }
      @case ('bounceOutRight') {
        <app-angular-img [@bounceOutRight]="{ value: animationState, params: { duration: duration, delay: delay, translate: translate } }" />
      }
      @case ('bounceOutUp') {
        <app-angular-img [@bounceOutUp]="{ value: animationState, params: { duration: duration, delay: delay, translate: translate } }" />
      }
      <!-- Fading entrances -->
      @case ('fadeIn') {
        <app-angular-img [@fadeIn]="{ value: animationState, params: { duration: duration, delay: delay } }" />
      }
      @case ('fadeInDown') {
        <app-angular-img [@fadeInDown]="{ value: animationState, params: { duration: duration, delay: delay, translate: translate } }" />
      }
      @case ('fadeInDownBig') {
        <app-angular-img [@fadeInDownBig]="{ value: animationState, params: { duration: duration, delay: delay, translate: translate } }" />
      }
      @case ('fadeInLeft') {
        <app-angular-img [@fadeInLeft]="{ value: animationState, params: { duration: duration, delay: delay, translate: translate } }" />
      }
      @case ('fadeInLeftBig') {
        <app-angular-img [@fadeInLeftBig]="{ value: animationState, params: { duration: duration, delay: delay, translate: translate } }" />
      }
      @case ('fadeInRight') {
        <app-angular-img [@fadeInRight]="{ value: animationState, params: { duration: duration, delay: delay, translate: translate } }" />
      }
      @case ('fadeInRightBig') {
        <app-angular-img [@fadeInRightBig]="{ value: animationState, params: { duration: duration, delay: delay, translate: translate } }" />
      }
      @case ('fadeInUp') {
        <app-angular-img [@fadeInUp]="{ value: animationState, params: { duration: duration, delay: delay, translate: translate } }" />
      }
      @case ('fadeInUpBig') {
        <app-angular-img [@fadeInUpBig]="{ value: animationState, params: { duration: duration, delay: delay, translate: translate } }" />
      }
      <!-- Fading exits -->
      @case ('fadeOut') {
        <app-angular-img [@fadeOut]="{ value: animationState, params: { duration: duration, delay: delay } }" />
      }
      @case ('fadeOutDown') {
        <app-angular-img [@fadeOutDown]="{ value: animationState, params: { duration: duration, delay: delay, translate: translate } }" />
      }
      @case ('fadeOutDownBig') {
        <app-angular-img [@fadeOutDownBig]="{ value: animationState, params: { duration: duration, delay: delay, translate: translate } }" />
      }
      @case ('fadeOutLeft') {
        <app-angular-img [@fadeOutLeft]="{ value: animationState, params: { duration: duration, delay: delay, translate: translate } }" />
      }
      @case ('fadeOutLeftBig') {
        <app-angular-img [@fadeOutLeftBig]="{ value: animationState, params: { duration: duration, delay: delay, translate: translate } }" />
      }
      @case ('fadeOutRight') {
        <app-angular-img [@fadeOutRight]="{ value: animationState, params: { duration: duration, delay: delay, translate: translate } }" />
      }
      @case ('fadeOutRightBig') {
        <app-angular-img [@fadeOutRightBig]="{ value: animationState, params: { duration: duration, delay: delay, translate: translate } }" />
      }
      @case ('fadeOutUp') {
        <app-angular-img [@fadeOutUp]="{ value: animationState, params: { duration: duration, delay: delay, translate: translate } }" />
      }
      @case ('fadeOutUpBig') {
        <app-angular-img [@fadeOutUpBig]="{ value: animationState, params: { duration: duration, delay: delay, translate: translate } }" />
      }
      <!-- Flippers -->
      @case ('flip') {
        <app-angular-img [@flip]="{ value: animationState, params: { duration: duration, delay: delay } }" />
      }
      @case ('flipInX') {
        <app-angular-img [@flipInX]="{ value: animationState, params: { duration: duration, delay: delay, degrees: degrees } }" />
      }
      @case ('flipInY') {
        <app-angular-img [@flipInY]="{ value: animationState, params: { duration: duration, delay: delay, degrees: degrees } }" />
      }
      @case ('flipOutX') {
        <app-angular-img [@flipOutX]="{ value: animationState, params: { duration: duration, delay: delay, degrees: degrees } }" />
      }
      @case ('flipOutY') {
        <app-angular-img [@flipOutY]="{ value: animationState, params: { duration: duration, delay: delay, degrees: degrees } }" />
      }
      <!-- Light speed -->
      @case ('lightSpeedIn') {
        <app-angular-img [@lightSpeedIn]="{ value: animationState, params: { duration: duration, delay: delay, translate: translate } }" />
      }
      @case ('lightSpeedOut') {
        <app-angular-img [@lightSpeedOut]="{ value: animationState, params: { duration: duration, delay: delay, translate: translate } }" />
      }
      <!-- Rotating entrances -->
      @case ('rotateIn') {
        <app-angular-img [@rotateIn]="{ value: animationState, params: { duration: duration, delay: delay, degrees: degrees } }" />
      }
      @case ('rotateInDownLeft') {
        <app-angular-img [@rotateInDownLeft]="{ value: animationState, params: { duration: duration, delay: delay, degrees: degrees } }" />
      }
      @case ('rotateInDownRight') {
        <app-angular-img [@rotateInDownRight]="{ value: animationState, params: { duration: duration, delay: delay, degrees: degrees } }" />
      }
      @case ('rotateInUpLeft') {
        <app-angular-img [@rotateInUpLeft]="{ value: animationState, params: { duration: duration, delay: delay, degrees: degrees } }" />
      }
      @case ('rotateInUpRight') {
        <app-angular-img [@rotateInUpRight]="{ value: animationState, params: { duration: duration, delay: delay, degrees: degrees } }" />
      }
      <!--Rotating exits  -->
      @case ('rotateOut') {
        <app-angular-img [@rotateOut]="{ value: animationState, params: { duration: duration, delay: delay, degrees: degrees } }" />
      }
      @case ('rotateOutDownLeft') {
        <app-angular-img [@rotateOutDownLeft]="{ value: animationState, params: { duration: duration, delay: delay, degrees: degrees } }" />
      }
      @case ('rotateOutDownRight') {
        <app-angular-img [@rotateOutDownRight]="{ value: animationState, params: { duration: duration, delay: delay, degrees: degrees } }" />
      }
      @case ('rotateOutUpLeft') {
        <app-angular-img [@rotateOutUpLeft]="{ value: animationState, params: { duration: duration, delay: delay, degrees: degrees } }" />
      }
      @case ('rotateOutUpRight') {
        <app-angular-img [@rotateOutUpRight]="{ value: animationState, params: { duration: duration, delay: delay, degrees: degrees } }" />
      }
      <!-- Sliding entrances -->
      @case ('slideInUp') {
        <app-angular-img [@slideInUp]="{ value: animationState, params: { duration: duration, delay: delay, translate: translate } }" />
      }
      @case ('slideInDown') {
        <app-angular-img [@slideInDown]="{ value: animationState, params: { duration: duration, delay: delay, translate: translate } }" />
      }
      @case ('slideInLeft') {
        <app-angular-img [@slideInLeft]="{ value: animationState, params: { duration: duration, delay: delay, translate: translate } }" />
      }
      @case ('slideInRight') {
        <app-angular-img [@slideInRight]="{ value: animationState, params: { duration: duration, delay: delay, translate: translate } }" />
      }
      <!-- Sliding exits -->
      @case ('slideOutUp') {
        <app-angular-img [@slideOutUp]="{ value: animationState, params: { duration: duration, delay: delay, translate: translate } }" />
      }
      @case ('slideOutDown') {
        <app-angular-img [@slideOutDown]="{ value: animationState, params: { duration: duration, delay: delay, translate: translate } }" />
      }
      @case ('slideOutLeft') {
        <app-angular-img [@slideOutLeft]="{ value: animationState, params: { duration: duration, delay: delay, translate: translate } }" />
      }
      @case ('slideOutRight') {
        <app-angular-img [@slideOutRight]="{ value: animationState, params: { duration: duration, delay: delay } }" />
      }
      <!-- Zooming entrances -->
      @case ('zoomIn') {
        <app-angular-img [@zoomIn]="{ value: animationState, params: { duration: duration, delay: delay } }" />
      }
      @case ('zoomInDown') {
        <app-angular-img [@zoomInDown]="{ value: animationState, params: { duration: duration, delay: delay } }" />
      }
      @case ('zoomInLeft') {
        <app-angular-img [@zoomInLeft]="{ value: animationState, params: { duration: duration, delay: delay } }" />
      }
      @case ('zoomInRight') {
        <app-angular-img [@zoomInRight]="{ value: animationState, params: { duration: duration, delay: delay } }" />
      }
      @case ('zoomInUp') {
        <app-angular-img [@zoomInUp]="{ value: animationState, params: { duration: duration, delay: delay } }" />
      }
      <!-- Zooming exits -->
      @case ('zoomOut') {
        <app-angular-img [@zoomOut]="{ value: animationState, params: { duration: duration, delay: delay } }" />
      }
      @case ('zoomOutDown') {
        <app-angular-img [@zoomOutDown]="{ value: animationState, params: { duration: duration, delay: delay } }" />
      }
      @case ('zoomOutLeft') {
        <app-angular-img [@zoomOutLeft]="{ value: animationState, params: { duration: duration, delay: delay } }" />
      }
      @case ('zoomOutRight') {
        <app-angular-img [@zoomOutRight]="{ value: animationState, params: { duration: duration, delay: delay } }" />
      }
      @case ('zoomOutUp') {
        <app-angular-img [@zoomOutUp]="{ value: animationState, params: { duration: duration, delay: delay } }" />
      }
      <!-- Specials -->
      @case ('hinge') {
        <app-angular-img [@hinge]="{ value: animationState, params: { duration: duration, delay: delay } }" />
      }
      @case ('jackInTheBox') {
        <app-angular-img [@jackInTheBox]="{ value: animationState, params: { duration: duration, delay: delay } }" />
      }
      @case ('rollIn') {
        <app-angular-img [@rollIn]="{ value: animationState, params: { duration: duration, delay: delay, degrees: degrees, translate: translate } }" />
      }
      @case ('rollOut') {
        <app-angular-img [@rollOut]="{ value: animationState, params: { duration: duration, delay: delay, degrees: degrees, translate: translate } }" />
      }
      <!-- Other -->
      @case ('collapse') {
        <app-angular-img [@collapse]="{ value: animationWithState, params: { duration: duration, delay: delay } }" />
      }
      @case ('collapseHorizontally') {
        <app-angular-img [@collapseHorizontally]="{ value: animationWithState, params: { duration: duration, delay: delay } }" />
      }
      @case ('rotate') {
        <app-angular-img [@rotate]="{ value: animationWithState, params: { duration: duration, delay: delay, degrees: degrees } }" />
      }
      @case ('hueRotate') {
        <app-angular-img [@hueRotate]="{ value: animationState, params: { duration: duration, delay: delay } }" />
      }
      @default {
        <div>选择动画</div>
      }
    }
  </div>
</div>

<div class="center" [@enter3]="{ value: '', params: { delay: 1200, duration: 1000 } }">
  <nz-select class="m-r-8" nzAllowClear nzPlaceHolder="Choose" nzShowSearch style="width: 200px" [(ngModel)]="animation" (ngModelChange)="animationChanged()">
    @for (option of options; track $index) {
      <nz-option-group [nzLabel]="option.label">
        @for (animation of option.animations; track $index) {
          <nz-option [nzLabel]="animation" [nzValue]="animation"></nz-option>
        }
      </nz-option-group>
    }
  </nz-select>

  <button nz-button nzType="default" [disabled]="f.invalid" (click)="animate()">点击骚动起来</button>
</div>
